<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.red {
			color: #F00;
			float: left;
			padding-left: 5px;
		}
	</style>
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="css/global.css">
	<script src="layui/layui.js"></script>
	<script>
		layui.use('laydate', function () {
			var laydate = layui.laydate
			laydate.render({
				elem: '#birthday'
			});

		})
	</script>
</head>

<body>
	<iframe src="head.jsp" scrolling="no" width="100%" height="65px"></iframe>
	<div class="main layui-clear">
		<div class="layui-container fly-marginTop">
			<div class="fly-panel fly-panel-user" pad20="">
				<div class="layui-tab layui-tab-brief" lay-filter="user">
					<ul class="layui-tab-title">
						<li>
							<a href="login.html">登入</a>
						</li>
						<li class="layui-this">注册</li>
					</ul>
					<div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
						<div class="layui-tab-item layui-show">
							<div class="layui-form layui-form-pane">
								<form action="RegisterServlet" method="post" id="myForm">
									<div class="layui-form-item"> <label for="L_email"
											class="layui-form-label">邮箱</label>
										<div class="layui-input-inline"> <input type="text" id="userName" name="email"
												placeholder="请输入用户名" required="" lay-verify="userName"
												class="layui-input"> </div>
										<div class="red" id="DivEmail"></div>
										<div class="layui-form-mid layui-word-aux">将会成为您唯一的登入名</div>
									</div>

									<div class="layui-form-item"> <label for="L_pass"
											class="layui-form-label">密码</label>
										<div class="layui-input-inline"> <input type="password" id="L_pass"
												placeholder="请输入密码" name="password" required="" lay-verify="required"
												autocomplete="off" class="layui-input"> </div>
										<div class="layui-form-mid layui-word-aux">6到16个字符</div>
										<div class="red" id="DivPass"></div>
									</div>
									<div class="layui-form-item"> <label for="L_repass"
											class="layui-form-label">确认密码</label>
										<div class="layui-input-inline"> <input type="password" id="L_repass"
												name="repass" required="" placeholder="请输入确认密码" lay-verify="required"
												autocomplete="off" class="layui-input"> </div>
												<div class="red" id="DivRePass"></div>

									</div>

									<div class="layui-form-item"> <label for="L_username"
											class="layui-form-label">昵称</label>
										<div class="layui-input-inline"> <input type="text" id="L_nickName"
												placeholder="请输入昵称" name="nickname" required="" lay-verify="required"
												autocomplete="off" class="layui-input"> </div>
												<div class="red" id="DivNickname"></div>
												
									</div>
									<div class="layui-form-item"> <label for="L_username"
											class="layui-form-label">性别</label>
										<div class="layui-input-inline"> <input type="text" id="L_sex"
												placeholder="请输入性别" name="sex" required="" lay-verify="required"
												autocomplete="off" class="layui-input"> </div>
												<div class="red" id="DivSex"></div>
												
									</div>
									<div class="layui-form-item"> <label for="L_username"
											class="layui-form-label">生日</label>
										<div class="layui-input-inline"> <input type="text" id="L_birthday"
												placeholder="请输入生日yyyy-mm-dd" name="birthday" required=""
												lay-verify="required" autocomplete="off" class="layui-input"> </div>
									</div>
									<div class="layui-form-item"> <label for="L_username"
											class="layui-form-label">简介</label>
										<div class="layui-input-inline"> <input type="text" id="L_profile"
												placeholder="请输入个人简介" name="introduce" required="" lay-verify="required"
												autocomplete="off" class="layui-input"> </div>
									</div>
									<div class="layui-form-item"> <button class="layui-btn" lay-filter="*"
											lay-submit="">立即注册</button> </div>

								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script>
	$(function(){
		$('#userName').blur(checkemail);
		$('#userName').blur(checkEmailTrim);
		$('#userName').blur(checkEmailLength);
		$('#L_pass').blur(checkPasswordLength);
		$('#L_pass').blur(checkPasswordTrim);
		$('#L_repass').blur(checkPasswordEqual);
		$('#L_nickName').blur(checkNickname);
		$('#L_sex').blur(checkSex);
		
		function checkemail(){
			//定义一个邮箱的正则表达式  ,并用 test方法验证正则表达式
			var regCode = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			
			var email = $('#userName').val();
			console.log(email.length);
			var $msg = $('#DivEmail');
			$msg.html("");//先设置为空,根据后续判断情况,填入不同的提示信息
			if (email=='') {
				$msg.html('邮箱不可以为空');
				return false;
			}else if(regCode.test(email)==false){// test() 专门做正则验证 ,如果通过,返回true ,不通过,返回false
				$msg.html('邮箱的格式不正确');
				return false;
			}
			return true;
		}
		
		function checkEmailTrim(){
			var str = $('#userName').val();
			var $msg = $('#DivEmail');
			if(str.indexOf(" ")>=0){
				$msg.html('有空格，请仔细检查');
				return false;
			}
			return true;
		}
		
		function checkEmailLength(){
			var emailLength = $('#userName').val().length;
			console.log(emailLength);
			var $msg = $('#DivEmail');
			if(emailLength>50){
				$msg.html('邮箱字符过长，请进行核对');
				return false;
			}
			return true;
		}
		
		function checkPasswordLength(){
			var passwordLen = $('#L_pass').val().length;
			console.log(passwordLen);
			var $msg = $('#DivPass');
			if(passwordLen<6){
				$msg.html('密码不符合长度');
				return false;
			}else if(passwordLen>12){
				$msg.html('密码不符合长度');
				return false;
			}else{
				$msg.html('');
			}
			return true;
		}
		
		function checkPasswordTrim(){
			var str = $('#L_pass').val();
			var $msg = $('#DivPass');
			if(str.indexOf(" ")>=0){
				$msg.html('有空格，请仔细检查');
				return false;
			}
			return true;
		}
		
		function checkPasswordEqual(){
			var pass = $('#L_pass').val();
			var repass = $('#L_repass').val();
			var $msg = $('#DivRePass');
			if(pass==repass){
				$msg.html('');
				return true;
			}else{
				$msg.html('两次输入密码不一致');
				return false;
			}
		}
		
		function checkSex(){
			var sex = $('#L_sex').val();
			var $msg = $('#DivSex');
			if(sex=='男'){
				$msg.html('');
				return true;
			}else if(sex == '女'){
				$msg.html('');
				return true;
			}else{
				$msg.html('请输入男或女');
				return false;
			}
		}
		
		function checkNickname(){
			var nickname = $('#L_nickName').val().length;
			var $msg = $('#DivNickname');
			console.log(nickname);
			if(nickname==0){
				$msg.html('昵称不能为空');
				return false;
			}else{
				$msg.html('');
				return true;
			}
		}
		
		$('#myForm').submit(function(){
			var flag = true;
			if(checkemail()==false){
				flag = false;
			}
			if(checkEmailTrim()==false){
				flag = false;
			}
			if(checkEmailLength()==false){
				flag = false;
			}
			if(checkPasswordLength()==false){
				flag+false;
			}
			if(checkPasswordTrim()==false){
				flag = false;
			}
			if(checkPasswordEqual()==false){
				flag = false
;			}
			if(checkSex()==false){
				flag = false;
			}
			if(checkNickname()==false){
				flag = false;
			}
			return  flag;
		})
	
	});
</script>

